import { Button, Checkbox, SwipeCell } from "vant";
import { useInput, useOpen, useSchedulerDialog, useTasks } from "./hook";
import type { Task } from "./hook";
import SchedulerDialog from "../../components/SchedulerDialog";
import { defineComponent, ref, Transition } from "vue";

const Home = defineComponent({
  setup() {
    const inputRef = ref();
    const { open, changeOpen } = useOpen();
    const { tasks, addTask, removeTask, changeStatus, queryTask } = useTasks();
    const inputStr = useInput(inputRef);
    const handleOnAdd = () => {
      if (inputStr.value) {
        addTask(inputStr.value);
      }
      changeOpen();
    };

    const { showDialog, openDialog, closeDialog, currentTask } =
      useSchedulerDialog();

    const handleOnOpenDialog = (task: Task) => {
      console.log(task);
      openDialog(task);
    };

    return () => (
      <>
        <div class={"w-full flex flex-col h-screen"}>
          <header class={"relative h-48px flex-shrink-0"}>
            <h2
              class={
                "text-xl font-bold text-white bg-blue-500 h-full flex items-center justify-center"
              }
            >
              TodoList
            </h2>
            <div
              class={
                "absolute text-white right-6px top-4px h-40px w-40px rounded-full flex items-center justify-center active:bg-#ccc/30"
              }
            >
              <div class={"i-mdi-add w-30px h-30px"} onClick={changeOpen}></div>
            </div>
          </header>
          <Transition name="home">
            {open.value && (
              <div
                class={
                  "flex-shrink-0 h-48px px-8px w-full flex items-center gap-5px"
                }
              >
                <input
                  ref={inputRef}
                  type="text"
                  placeholder="please input job"
                  class={
                    "border h-80% flex-1 px-9px rounded-lg border-color-#ccc placeholder-color-#000/60"
                  }
                ></input>
                <Button
                  type="primary"
                  class={"w-45px h-30px!"}
                  onClick={handleOnAdd}
                >
                  add
                </Button>
              </div>
            )}
          </Transition>
          <section class={"flex-1"}>
            {tasks.value.map((task) => (
              <SwipeCell key={task.id} class={"shadow"}>
                {{
                  right: () => (
                    <div class={"px-5px flex gap-5px items-center h-full"}>
                      <Button
                        type="primary"
                        size="small"
                        onClick={() => handleOnOpenDialog(task)}
                      >
                        detail
                      </Button>
                      <Button type="warning" size="small">
                        modify
                      </Button>
                      <Button
                        type="danger"
                        size="small"
                        onClick={() => removeTask(task.id)}
                      >
                        delete
                      </Button>
                    </div>
                  ),
                  default: () => (
                    <div class={"flex items-center h-45px px-10px gap-10px"}>
                      <Checkbox v-model={task.status} />
                      <span class={task.status && "line-through"}>
                        {task.content}
                      </span>
                    </div>
                  ),
                }}
              </SwipeCell>
            ))}
          </section>
        </div>

        <div>
          {currentTask.value && (
            <SchedulerDialog
              showDialog={showDialog.value}
              task={currentTask.value}
            />
          )}
        </div>
      </>
    );
  },
});

export default Home;
